<template>
  <el-form ref="ruleForm" :model="formData" label-width="0" class="shelf-port">
    <div
      v-for="item in cloneDetailData.trans.shelfList"
      :key="item.shelfNo"
      class="ports"
      :span="24"
    >
      <div>
        <div
          v-for="(slot, slotIndex) in item.slotList"
          :key="'slot-' + slotIndex"
          class="ports-content"
        >
          <el-divider content-position="left" class="w-100">{{ item.shelfName + '-' + slot.slotName }}</el-divider>
          <div v-if="slot.netPortList.length" class="port-item">
            <el-form-item
              v-for="(lightBoardPort, index) in slot.netPortList"
              :key="slotIndex + '-' + index"
              :label="index + 1 < 10 ? `0${index + 1}` : `${index + 1}`"
              label-width="50px"
            >
              <div
                v-for="(port, portIndex) in lightBoardPort.portList"
                :key="portIndex"
              >
                <el-input
                  v-model="port.bizName"
                  :placeholder="$t('PORT_NAME')"
                  style="margin-bottom: 4px;width: 100%;"
                  maxlength="60"
                />
                <el-input
                  v-model="port.resourceCode"
                  :placeholder="$t('PORT_RESOURCE_CODE')"
                  style="margin-bottom: 4px;width: 100%;"
                  maxlength="32"
                />
              </div>
            </el-form-item>
          </div>
        </div>
      </div>
    </div>
  </el-form>
</template>

<script>
  export default {
    name: 'DeviceConfigPortShelf',
    props: {
      cloneDetailData: {
        type: Object,
        default: () => {
          return {}
        }
      }
    },
    data() {
      return {
        formData: {}
      }
    },
    methods: {}
  }
</script>
<style lang="scss">
@import '@/assets/css/mixin.module.scss';
.shelf-port {
  .ports {
    display: flex;

    .title {
      margin: 0;
      margin-right: 20px;
      width:auto;
      max-width: 150px;
      font-weight: bold;
    }

    > div {
      flex: 1;
    }

    .ports-content {
      display: flex;
      flex: 1;
      flex-wrap: wrap;
      padding-bottom: 10px;
      margin-bottom: 10px;
      // @include themeify {
      //   border-bottom: 1px dashed themed('borderColor');
      // }
      > .port-item {
        flex: 1;
        display: flex;
        flex-wrap: wrap;

        .el-form-item {
          width: 200px;
        }
      }

      .slot-name {
        margin: 0;
        margin-right: 10px;
        width:auto;
        max-width: 120px;
      }

      .el-form-item {
        margin: 0;
        margin-right: 20px;

        .el-form-item__label {
          padding: 0 10px 0 0;
          font-size: 12px;
          font-weight: normal;
        }

        .el-input__inner {
          padding-left: 5px;
        }
      }
    }
  }
  .ports:last-child .ports-content:last-child{
    border: 0;
  }
}
</style>
